<template>
    <div>
         <headers></headers>
         <van-row>
             <van-col span="4">
              <left/>
            </van-col>
            <van-col span="21">
               <!-- <van-uploader :after-read="upload"/> -->
              <div style="position: absolute;top: 60px;left: 200px">
                  <p>组织名称：<input type="text">&emsp;&emsp;
                      <van-button  type="info" @click="sousuo">查询</van-button>&emsp;
                      <van-button type="info">重置</van-button>
                  </p >
                  <p>
                      <van-button icon="plus" type="primary" @click="add_show">新增</van-button>&emsp;&emsp;
                      <van-button disabled type="primary" @click="exporta">导出</van-button>&emsp;&emsp;
                      <van-uploader :after-read="afterRead" multiple accept=".xls">导入</van-uploader>&emsp;&emsp;
                  </p >
                  <p><companytree @changepid="getpid" :data="data"></companytree></p>
              </div>
                    <div v-show="show_1">
            <van-button plain type="primary" @click="ss">取消</van-button>
            <van-form @submit="onSubmit">
              <van-field
                  v-model="form.name"
                  name="name"
                  label="组织名称"
                  placeholder="组织名称"
                  :rules="[{ required: true, message: '请输入组织名称' }]"
              />
              <van-field name="status" label="单选框">
                <template #input>
                  <van-radio-group v-model="form.status" direction="horizontal">
                    <van-radio name="1">企业</van-radio>
                    <van-radio name="2">部门</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <van-field
                  v-model="form.zzsuoxie"
                  name="zzsuoxie"
                  label="组织缩写"
                  placeholder="组织缩写"
                  :rules="[{ required: true, message: '请输入组织缩写'}]"
              />
              <van-field
                  v-model="form.sort"
                  name="sort"
                  label="组织排序"
                  placeholder="组织排序"
              />
              <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
              </div>
            </van-form>
          </div>
          <br>
          <br>
        <div>
          <!-- <companytree @changepid="getpid" :data="data"></companytree> -->
          <!-- <companytree :data="zuzhi_list" @getid="changee"></companytree> -->
          <van-cell is-link @click="showPopup">添加下级</van-cell>
          <div v-show="show" >
            <van-form @submit="onSubmit1">
              <van-field
                  v-model="form1.name"
                  name="name"
                  label="组织名称"
                  placeholder="组织名称"
                  :rules="[{ required: true, message: '请输入组织名称' }]"
              />
              <van-field name="status" label="单选框">
                <template #input>
                  <van-radio-group v-model="form1.status" direction="horizontal">
                    <van-radio name="2">部门</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <van-field
                  v-model="form.zzsuoxie"
                  name="zzsuoxie"
                  label="组织缩写"
                  placeholder="组织缩写"
                  :rules="[{ required: true, message: '请输入组织缩写'}]"
              />
              <van-field
                  v-model="form1.sort"
                  name="sort"
                  label="组织排序"
                  placeholder="组织排序"
              />
              <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
              </div>
            </van-form>
          </div>


        </div>
  
            </van-col>
         </van-row>
         
        
    </div>
</template>

<script>
// import maxios from '../http/axios'
import axios from 'axios'
import headers from '../comm/headers.vue'
import left from '../comm/left.vue'
import companytree from '../comm/companytree'
export default {
     components:{
        'headers':headers,
        'left':left,
        'companytree':companytree
    },
    data() {
        return {
          pid:0,
          data: [],
          show: false,
          show_1:false,
          form:{},
          form1:{},
          name:'',
      }
    },
    methods: {
      add_show(){
      this.show_1 = true
    },
    ss(){
      this.show_1 = false
    },
        upload(file){
            let formData = new FormData()
            formData.append('file',file.file)
            console.log(formData);
            formData.forEach((value, key) => {
                console.log("key %s: value %s", key, value);
            })
            axios({url:'http://127.0.0.1:5000/upload',method:'post',data:formData}).then(res => {
                console.log(res)
            })
            // maxios('upload','post',formData).then(res => {
            //     console.log(res)
            // })
        },
        getpid(id){
          alert(id)
        },

        getdapt(){
            axios({url:'http://localhost:5000/deptlist',method:'get'}).then(res => {
                this.data = res.data.list
            })
        },
        showPopup() {
          this.show = true;
        },
        onSubmit(values) {
          axios({url:'http://127.0.0.1:5000/zuzhi',method:'post',data:values}).then(res=>{
            alert(res.msg)
          })
        },
        afterRead(file){
          let formdate = new FormData()
          formdate.append('file',file.file)
          console.log(formdate)
          axios({url:'http://127.0.0.1:5000/datafile',method:'post',data:formdate}).then(res=>{
            alert(res.data.msg)
          })
        },
        exporta(){
          axios({url:'http://127.0.0.1:5000/download',method:'get'}).then(res=>{
            console.log(res)
          })
        },
        sousuo(){
          axios({url:'http://127.0.0.1:5000/zuzhi',method:'get',params:{name:this.name}}).then(res=>{
            console.log(res.data.list)
            this.msg1 = res.data.list
          })
        },
        onSubmit1(values) {
          values['pid'] = this.pid
          console.log(values)
          axios({url:'http://127.0.0.1:5000/zuzhi',method:'post',data:values}).then(res=>{
            if (res.data.code == 200){
              this.show = false
              this.get_zuzhi()
            }
          })
        },
    },
    created() {
        this.getdapt()
    }
}
</script>

<style scoped>

</style>
